import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

import 'package:shop/router/router.dart';
import 'package:shop/util/color.dart';
import 'package:shop/views/search_view.dart';
import 'package:shop/vm/category_vm.dart';

class CategoryPage extends StatefulWidget {
  const CategoryPage({super.key});

  @override
  State<CategoryPage> createState() => _CategoryPageState();
}

class _CategoryPageState extends State<CategoryPage> {
  final viewModel = CategoryViewModel();

  @override
  void initState() {
    super.initState();

    viewModel.getCategoryData();
  }

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider<CategoryViewModel>.value(
      value: viewModel,
      child: Scaffold(
        backgroundColor: Colors.white,
        appBar: AppBar(
            iconTheme: IconThemeData(color: Colors.white),
            title: Text('分类', style: TextStyle(color: Colors.white)),
            backgroundColor: HexColor.fromHex('#C00000')),
        body: Column(children: [
          SearchView(
            callback: (text) {
              Navigator.pushNamed(context, goodsPage, arguments: text);
            },
          ),
          Consumer<CategoryViewModel>(builder: (context, value, child) {
            return Expanded(
              child: Row(
                children: [
                  Expanded(
                    flex: 2,
                    child: ListView.builder(
                        keyboardDismissBehavior:
                            ScrollViewKeyboardDismissBehavior.onDrag,
                        itemCount: value.categoryList.length,
                        itemBuilder: (BuildContext context, int index) {
                          return InkWell(
                            child: Container(
                              key: ValueKey(index),
                              padding: EdgeInsets.only(left: 10),
                              decoration: BoxDecoration(
                                  color: value.selectIndex == index
                                      ? Colors.white
                                      : HexColor.fromHex('#f2eded'),
                                  border: Border(
                                      left: BorderSide(
                                          color: HexColor.fromHex('#C00000'),
                                          width: value.selectIndex == index
                                              ? 3
                                              : 0))),
                              alignment: Alignment.center,
                              height: 50,
                              child: Text(
                                value.categoryList[index].catName ?? '',
                              ),
                            ),
                            onTap: () {
                              setState(() {
                                value.selectIndex = index;
                                value.selectInfo = value.categoryList[index];
                              });
                            },
                          );
                        }),
                  ),
                  Expanded(
                    flex: 5,
                    child: ListView.builder(
                        padding: EdgeInsets.only(bottom: 10),
                        keyboardDismissBehavior:
                            ScrollViewKeyboardDismissBehavior.onDrag,
                        itemCount: value.selectInfo?.children?.length ?? 0,
                        itemBuilder: (BuildContext context, int index) {
                          final dataInfo = value.selectInfo?.children?[index];
                          return Column(
                            key: ValueKey(index),
                            children: [
                              SizedBox(height: 10),
                              Text(
                                '/${dataInfo?.catName ?? ''}/',
                                style: TextStyle(color: Colors.blueAccent),
                              ),
                              SizedBox(height: 10),
                              Wrap(
                                spacing: 15,
                                runSpacing: 10,
                                alignment: WrapAlignment.start,
                                children: dataInfo?.children?.map((element) {
                                      final imageUrl = (element.catIcon ?? '')
                                          .replaceAll('https', 'http');
                                      return InkWell(
                                        child: Column(
                                          children: [
                                            CachedNetworkImage(
                                              imageUrl: imageUrl,
                                              width: 70,
                                              height: 70,
                                            ),
                                            SizedBox(height: 5),
                                            Text(element.catName ?? '')
                                          ],
                                        ),
                                        onTap: () {
                                          Navigator.pushNamed(
                                              context, goodsPage,
                                              arguments: element.catName);
                                        },
                                      );
                                    }).toList() ??
                                    [],
                              ),
                            ],
                          );
                        }),
                  ),
                ],
              ),
            );
          })
        ]),
      ),
    );
  }
}
